﻿@page "/chart/logarithmic-scale"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample shows the rendering of the logarithmic axis in the chart, with an analysis of the sales of the product between 1995 and 2005.</p>
</SampleDescription>
<ActionDescription>
    <p>The logarithmic axis uses a logarithmic scale and is very useful when viewing data with values of both lower order of magnitude (e.g. 10^-6) and higher order of magnitude (e.g. 10^6). To render logarithmic axis, set <code>ValueType</code> in axis to <code>Logarithmic</code>.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the logarithmic axis can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/logarithmic-axis'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Product X Growth [1995-2005]" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis LabelFormat="yyyy" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Minimum="0" Maximum="100000" Title="Profit" Interval="1" LabelFormat="${value}" MinorTicksPerInterval="5" EdgeLabelPlacement="EdgeLabelPlacement.Shift" ValueType="Syncfusion.Blazor.Charts.ValueType.Logarithmic">
            <ChartAxisMajorTickLines Width="0" Height="4"></ChartAxisMajorTickLines>
            <ChartAxisMajorGridLines Width="1.5"></ChartAxisMajorGridLines>
        </ChartPrimaryYAxis>
        <ChartTooltipSettings Enable="true" Header="Profit"></ChartTooltipSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" Name="Product X" XName="Period" Width="2" Opacity="1" YName="ProfitInfo" Type="ChartSeriesType.Line">
                <ChartMarker Visible="true" Height="10" Width="10">
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartLegendSettings Visible="false"></ChartLegendSettings>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<LogarithmicData> ChartPoints { get; set; } = new List<LogarithmicData>
    {
        new LogarithmicData { Period = new DateTime(1995, 1, 1),  ProfitInfo = 80  },
        new LogarithmicData { Period = new DateTime(1996, 1, 1),  ProfitInfo = 200 },
        new LogarithmicData { Period = new DateTime(1997, 1, 1),  ProfitInfo = 400 },
        new LogarithmicData { Period = new DateTime(1998, 1, 1),  ProfitInfo = 600 },
        new LogarithmicData { Period = new DateTime(1999, 1, 1),  ProfitInfo = 700 },
        new LogarithmicData { Period = new DateTime(2000, 1, 1),  ProfitInfo = 1400 },
        new LogarithmicData { Period = new DateTime(2001, 1, 1),  ProfitInfo = 2000 },
        new LogarithmicData { Period = new DateTime(2002, 1, 1),  ProfitInfo = 4000 },
        new LogarithmicData { Period = new DateTime(2003, 1, 1),  ProfitInfo = 6000 },
        new LogarithmicData { Period = new DateTime(2004, 1, 1),  ProfitInfo = 8000 },
        new LogarithmicData { Period = new DateTime(2005, 1, 1),  ProfitInfo = 11000 }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class LogarithmicData
    {
        public DateTime Period { get; set; }
        public double ProfitInfo { get; set; }
    }
}
